<template>
	<view class="forgot-container">
		<view class="forgot-card">
			<view class="back-btn" @click="goBack">
				<text class="icon">&#8592;</text> 返回
			</view>
			
			<view class="card-title">找回密码</view>
			<view class="sub-title">重置您的管理员账号密码</view>
			
			<view class="input-item">
				<view class="input-label">邮箱 <text class="required">*</text></view>
				<input class="input" type="text" v-model="email" placeholder="请输入邮箱" />
			</view>
			
			<view class="input-item">
				<view class="input-label">验证码 <text class="required">*</text></view>
				<view class="code-input-group">
					<input class="input code-input" type="text" v-model="code" placeholder="请输入验证码" />
					<button class="code-btn" :disabled="codeBtnDisabled" @click="handleSendCode">
						{{ codeBtnText }}
					</button>
				</view>
			</view>
			
			<view class="input-item">
				<view class="input-label">新密码 <text class="required">*</text></view>
				<input class="input" type="password" v-model="password" placeholder="请输入新密码" />
			</view>
			
			<view class="input-item">
				<view class="input-label">确认密码 <text class="required">*</text></view>
				<input class="input" type="password" v-model="confirmPassword" placeholder="请再次输入新密码" />
			</view>
			
			<button class="submit-btn" @click="handleSubmit" :disabled="loading">
				<text v-if="!loading">重置密码</text>
				<view v-else class="loading"></view>
			</button>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	
	export default {
		data() {
			return {
				email: '',
				code: '',
				password: '',
				confirmPassword: '',
				loading: false,
				codeBtnDisabled: false,
				codeBtnText: '发送验证码',
				codeTimer: null,
				countdown: 60
			}
		},
		onUnload() {
			// 清除定时器
			if (this.codeTimer) {
				clearInterval(this.codeTimer);
				this.codeTimer = null;
			}
		},
		methods: {
			// 返回登录页
			goBack() {
				uni.navigateBack();
			},
			
			// 发送验证码
			handleSendCode() {
				if (!this.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return;
				}
				
				// 邮箱格式验证
				if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return;
				}
				
				this.codeBtnDisabled = true;
				
				// 调用发送验证码接口
				api.auth.sendResetCode({
					email: this.email
				}).then(res => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					
					// 开始倒计时
					this.startCountdown();
				}).catch(err => {
					uni.showToast({
						title: err.message || '验证码发送失败',
						icon: 'none'
					});
					this.codeBtnDisabled = false;
				});
			},
			
			// 开始倒计时
			startCountdown() {
				this.countdown = 60;
				this.codeBtnText = `${this.countdown}秒后重试`;
				
				this.codeTimer = setInterval(() => {
					this.countdown--;
					this.codeBtnText = `${this.countdown}秒后重试`;
					
					if (this.countdown <= 0) {
						clearInterval(this.codeTimer);
						this.codeTimer = null;
						this.codeBtnText = '发送验证码';
						this.codeBtnDisabled = false;
					}
				}, 1000);
			},
			
			// 提交表单
			handleSubmit() {
				if (!this.validateForm()) {
					return;
				}
				
				this.loading = true;
				
				// 调用重置密码接口
				api.auth.resetPassword({
					email: this.email,
					code: this.code,
					password: this.password
				}).then(res => {
					uni.showToast({
						title: '密码重置成功',
						icon: 'success'
					});
					
					// 跳转到登录页
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/login/login'
						});
					}, 1500);
				}).catch(err => {
					uni.showToast({
						title: err.message || '密码重置失败',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			},
			
			// 表单验证
			validateForm() {
				if (!this.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return false;
				}
				
				if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.password) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
					return false;
				}
				
				if (this.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					});
					return false;
				}
				
				if (this.password !== this.confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			}
		}
	}
</script>

<style>
	.forgot-container {
		min-height: 100vh;
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
		background-image: linear-gradient(135deg, #3f51b5 0%, #2196f3 100%);
	}
	
	.forgot-card {
		width: 80%;
		max-width: 400px;
		background-color: #fff;
		border-radius: 8px;
		padding: 30px;
		box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
		position: relative;
	}
	
	.back-btn {
		position: absolute;
		top: 15px;
		left: 15px;
		color: #3f51b5;
		font-size: 14px;
		cursor: pointer;
		display: flex;
		align-items: center;
	}
	
	.icon {
		margin-right: 5px;
		font-size: 16px;
	}
	
	.card-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
		text-align: center;
	}
	
	.sub-title {
		font-size: 14px;
		color: #666;
		margin-bottom: 20px;
		text-align: center;
	}
	
	.input-item {
		margin-bottom: 20px;
	}
	
	.input-label {
		font-size: 14px;
		margin-bottom: 6px;
		color: #333;
	}
	
	.required {
		color: #f44336;
	}
	
	.input {
		width: 100%;
		height: 40px;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 0 12px;
		font-size: 14px;
		box-sizing: border-box;
	}
	
	.code-input-group {
		display: flex;
	}
	
	.code-input {
		flex: 1;
		margin-right: 10px;
	}
	
	.code-btn {
		width: 120px;
		height: 40px;
		background-color: #3f51b5;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 12px;
		cursor: pointer;
	}
	
	.code-btn:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}
	
	.submit-btn {
		width: 100%;
		height: 44px;
		background-color: #3f51b5;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.submit-btn:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}
	
	.loading {
		width: 20px;
		height: 20px;
		border: 2px solid rgba(255, 255, 255, 0.3);
		border-top: 2px solid #fff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style> 